{% extends "base.html" %}

{% block title %}语料测试 - 英语词汇量估算工具{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-10 mx-auto">
        <div class="card">
            <div class="card-header">
                <h4 class="mb-0"><i class="fas fa-file-text me-2"></i>语料词汇量估算</h4>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    <h5>使用说明</h5>
                    <div class="alert alert-info">
                        <strong>功能说明:</strong> 通过分析英文文本的词汇复杂度来估算词汇量水平
                        <br><strong>适用场景:</strong> 分析学习材料、文章、文档的词汇难度
                        <br><strong>支持格式:</strong> 支持 .txt, .doc, .docx, .pdf 文件格式
                        <br><strong>注意事项:</strong> 文本越长，分析结果越准确
                    </div>
                </div>
                
                <form id="corpusForm">
                    <div class="mb-3">
                        <label for="corpusText" class="form-label">英文文本</label>
                        <textarea class="form-control" id="corpusText" rows="15" placeholder="请输入或粘贴英文文本内容..."></textarea>
                        <div class="form-text">建议输入至少100个英文单词以获得更准确的分析结果</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="fileUpload" class="form-label">或上传文件</label>
                        <input type="file" class="form-control" id="fileUpload" accept=".txt,.doc,.docx,.pdf">
                        <div class="form-text">支持的文件格式：.txt, .doc, .docx, .pdf（最大10MB）</div>
                    </div>
                    
                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <button type="button" id="clearTextBtn" class="btn btn-outline-secondary">
                            <i class="fas fa-eraser me-2"></i>清空文本
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-chart-line me-2"></i>开始分析
                        </button>
                    </div>
                </form>
                
                <div id="result" style="display: none;">
                    <div class="card result-card">
                        <div class="card-body text-center">
                            <h4 class="mb-3">语料分析结果</h4>
                            <div class="row mb-4">
                                <div class="col-md-4">
                                    <h5>估算词汇量</h5>
                                    <h2 id="vocabularyEstimate" class="text-white">-</h2>
                                </div>
                                <div class="col-md-4">
                                    <h5>置信度</h5>
                                    <h2 id="confidence" class="text-white">-</h2>
                                </div>
                                <div class="col-md-4">
                                    <h5>英语等级</h5>
                                    <h2 id="levelDisplay" class="text-white">-</h2>
                                </div>
                            </div>
                            
                            <div id="levelDetails" class="mb-4" style="display: none;">
                                <div class="card">
                                    <div class="card-body">
                                        <h5 id="levelName" class="mb-2 text-dark"></h5>
                                        <p id="levelRange" class="text-muted mb-2"></p>
                                        <p id="levelDescription" class="text-dark mb-3"></p>
                                        <div id="levelFeatures" class="text-dark"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <p id="resultMessage" class="mt-3"></p>
                            <div class="mt-4">
                                <button id="newAnalysis" class="btn btn-light me-2">
                                    <i class="fas fa-redo me-2"></i>重新分析
                                </button>
                                <button id="viewHistory" class="btn btn-light">
                                    <i class="fas fa-history me-2"></i>查看历史
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="alertContainer"></div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 文件上传处理
    $('#fileUpload').on('change', function(e) {
        const file = e.target.files[0];
        if (!file) return;
        
        // 检查文件大小（10MB限制）
        if (file.size > 10 * 1024 * 1024) {
            showAlert('文件大小不能超过10MB', 'warning');
            this.value = '';
            return;
        }
        
        // 检查文件类型
        const allowedTypes = ['.txt', '.doc', '.docx', '.pdf'];
        const fileExtension = '.' + file.name.split('.').pop().toLowerCase();
        if (!allowedTypes.includes(fileExtension)) {
            showAlert('不支持的文件格式，请上传 .txt, .doc, .docx, .pdf 文件', 'warning');
            this.value = '';
            return;
        }
        
        // 显示加载状态
        showAlert('正在读取文件...', 'info');
        
        // 创建FormData对象
        const formData = new FormData();
        formData.append('file', file);
        
        // 发送文件到后端
        $.ajax({
            url: '{{ url_for("upload_file") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    $('#corpusText').val(response.text);
                    showAlert(response.message, 'success');
                } else {
                    showAlert(response.message, 'danger');
                }
            },
            error: function() {
                showAlert('文件上传失败，请重试', 'danger');
            }
        });
    });
    
    // 清空文本按钮
    $('#clearTextBtn').click(function() {
        $('#corpusText').val('');
        $('#fileUpload').val('');
        showAlert('文本已清空', 'info');
    });
    
    // 表单提交
    $('#corpusForm').on('submit', function(e) {
        e.preventDefault();
        
        const corpusText = $('#corpusText').val().trim();
        if (!corpusText) {
            showAlert('请输入英文文本或上传文件', 'warning');
            return;
        }
        
        // 简单的文本长度检查
        const wordCount = corpusText.split(/\s+/).length;
        if (wordCount < 10) {
            showAlert('文本太短，建议输入至少10个单词', 'warning');
            return;
        }
        
        // 显示加载状态
        const submitBtn = $(this).find('button[type="submit"]');
        const originalText = submitBtn.html();
        submitBtn.html('<i class="fas fa-spinner fa-spin me-2"></i>分析中...').prop('disabled', true);
        
        $.ajax({
            url: '/api/estimate_corpus',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                text: corpusText
            }),
            success: function(response) {
                if (response.success) {
                    displayCorpusResults(response, corpusText);
                } else {
                    showAlert(response.message, 'danger');
                }
            },
            error: function() {
                showAlert('分析失败，请稍后重试', 'danger');
            },
            complete: function() {
                submitBtn.html(originalText).prop('disabled', false);
            }
        });
    });
    
    // 重新分析按钮
    $('#newAnalysis').click(function() {
        $('#result').hide();
        $('#corpusForm')[0].reset();
    });
    
    // 查看历史按钮
    $('#viewHistory').click(function() {
        window.location.href = '{{ url_for("dashboard") }}';
    });
    
    function displayCorpusResults(response, originalText) {
        // 显示词汇量
        $('#vocabularyEstimate').text(response.vocabulary_size.toLocaleString());
        
        // 显示置信度
        $('#confidence').text((response.confidence * 100).toFixed(1) + '%');
        
        // 显示等级信息
        const level = response.level;
        $('#levelDisplay').text(level.display);
        $('#levelName').text(level.info.name);
        $('#levelRange').text('词汇量范围: ' + level.info.range);
        $('#levelDescription').text(level.info.description);
        
        // 显示等级特征
        let featuresHtml = '<h6>能力特征:</h6><ul class="list-unstyled">';
        level.info.features.forEach(function(feature) {
            featuresHtml += '<li><i class="fas fa-check text-success me-2"></i>' + feature + '</li>';
        });
        featuresHtml += '</ul>';
        $('#levelFeatures').html(featuresHtml);
        
        // 显示等级详情
        $('#levelDetails').show();
        
        // 设置等级颜色
        const levelColors = {
            'secondary': 'text-secondary',
            'success': 'text-success', 
            'info': 'text-info',
            'warning': 'text-warning',
            'primary': 'text-primary',
            'danger': 'text-danger',
            'dark': 'text-dark',
            'purple': 'text-purple'
        };
        
        const colorClass = levelColors[level.color] || 'text-primary';
        $('#levelDisplay').removeClass().addClass('text-white ' + colorClass);
        $('#levelName').removeClass().addClass(colorClass);
        
        // 显示结果消息
        const wordCount = originalText.split(/\s+/).length;
        const uniqueWords = new Set(originalText.toLowerCase().match(/\b[a-z]+\b/g) || []).size;
        $('#resultMessage').text(`分析完成！该文本的英语水平达到 ${level.info.name}，词汇量约为 ${response.vocabulary_size.toLocaleString()} 个单词。文本包含 ${wordCount} 个单词，其中 ${uniqueWords} 个独特词汇。`);
        
        // 显示结果
        $('#result').show();
    }
    
    function showAlert(message, type) {
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        $('#alertContainer').html(alertHtml);
    }
});
</script>
{% endblock %} 